<template>
  <m-header-title headerTitle='myCollect' headeType="back" @goBack="goBack" />
  <div class="collect">
    <van-pull-refresh v-model="Dwnloading" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="暂无数据"
        @load="onLoad"
      >
        <div
          v-for="item in list"
          :key="item.id"
          class="flex news-item"
          @click="gotoDetail(item.uniquekey)"
        >
          <img :src="item.img" />
          <div class="text-s">
            <p class="title">{{ item.title }}</p>
            <p class="date">
              <span>{{ item.author_name }}</span>
              <span>{{ item.date }}</span>
            </p>
          </div>
          <van-divider hairline />
        </div>
      </van-list>
      <div class='no-msg' v-if='no_msg'>
        <img src="./../../assets/images/no_msg.png" alt="">
      </div>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts">
import { MHeaderTitle } from '@/components'

import { useI18n } from '@/i18nPlugin'

import { toRefs, defineComponent, reactive, onMounted } from 'vue'
//缓存
import { useStore } from 'vuex'
//路由
import { useRouter,useRoute } from 'vue-router'
//接口
import { getCellectList } from '@/config/api'

export default defineComponent({
  nem: 'Collect',
  components: {
    MHeaderTitle,
  },
  setup: () => {
    const router = useRouter()
    const route = useRoute()
    const store = useStore() // 使用useStore方法
    const i18n = useI18n()
    const data = reactive({
      loading: false, //上啦加载更多状态
      Dwnloading: false, //下拉刷新状态
      finished: false, //是否可以加载更多
      list: [],
      pageNum: 0,
      no_msg: false
    })
    const getCellectListFunc = (pageNum: number) => {
      let req = {
        pageNum,
        userCode: store.state.userData.userCode,
      }
      getCellectList(req).then((res) => {
        // console.log(pageNum,res)
        if (res.data.responseCode === 1000) {
          if (pageNum == 1) {
            data.list = res.data.cellectList
            if(res.data.cellectList.length == 0) {
              data.no_msg = true
            }
          } else {
            data.list = data.list.concat(res.data.cellectList)
          }
          data.loading = false
          if (pageNum >= res.data.pageTotal) {
            data.finished = true
          }
          data.Dwnloading = false
        }
      })
    }
    const onRefresh = () => {
      console.log('下拉刷新')
      //下拉刷新
      data.pageNum = 1
      setTimeout(() => {
        getCellectListFunc(data.pageNum)
      }, 1000)
    }
    const onLoad = () => {
      data.pageNum++
      setTimeout(() => {
        getCellectListFunc(data.pageNum)
      }, 1000)
    }
    const gotoDetail = (id: string) => {
      let obj = {
        key:'detailBackType',
        value:'/collect'
      }
      store.commit('MUTATIONS_SET_STATE',obj)
      router.replace(`/newsDetail?id=${id}`)
    }
    const goBack = () => {
      router.replace(`${store.state.collectBackType}`)
    }
    onMounted(() => {})
    return {
      ...toRefs(data),
      i18n,
      onMounted,
      onLoad,
      gotoDetail,
      onRefresh,
      goBack,
    }
  },
})
</script>

<style scoped lang="scss">
.collect {
  padding: 60px 10px 0 10px;
}
.news-item {
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 15px;
  img {
    width: 33%;
    height: 90px;
    margin: 0 5px;
  }
  .text-s {
    position: relative;
    font-size: 14px;
    height: 100px;
    padding-right: 10px;
    flex: 1;
    .title {
      width: 95%;
      position: absolute;
      top: 15px;
      font-size: 14px;
      font-weight: bold;
    }
    .date {
      position: absolute;
      bottom: 5px;
      display: flex;
      font-size: 13px;
      justify-content: space-between;
      width: 100%;
      padding-right: 10px;
      color: #ccc;
    }
  }
}
.no-msg {
  width: 100%;
  img {
    width: 100%;
  }
}
</style>
